<%@ page import="activity.Event" %>
<!DOCTYPE html>
<html>
    <head>
        <meta name="layout" content="frontend">
        <script src="${resource(dir: 'js',file: 'bootbox.min.js')}"></script>
    </head>
    <body>
        <div class="row">
            <div class="col-md-4">
                <div class="panel panel-info">
                    <div class="panel-heading">
                        <p class="text-center" style="font-size:40"><strong>${serial.name}</strong></p>
                    </div>
                    <ul class="list-group list-group-flush text-center">
                        <li class="list-group-item"><i class="icon-ok text-danger"></i>主辦單位：${serial.host}</li>
                        <li class="list-group-item"><i class="icon-ok text-danger"></i>承辦人：${serial.staff}</li>
                        <li class="list-group-item"><i class="icon-ok text-danger"></i>電話：${serial.tel}</li>
                        <li class="list-group-item"><i class="icon-ok text-danger"></i>Email：${serial.email}</li>
                    </ul>
                </div><!--/panel-->
            </div><!--/col-->
            <div class="col-md-8">
                <g:each in="${events}" status="i" var="event">
                    <div id="detail${event.id}" name="detail" style="display:none" class="panel panel-info">
                        <div class="panel-heading text-center">
                            <p style="font-size:40px"><strong>${event.name}</strong></p>
                        </div>
                        <ul class="list-group list-group-flush text-center">
                            <li class="list-group-item"><i class="icon-ok text-danger"></i>時間：${formatDate(format:"MM/dd HH:mm",date:event.dateStart)} ~ ${formatDate(format:" HH:mm",date:event.dateEnd)}</li>
                            <li class="list-group-item"><i class="icon-ok text-danger"></i>地點：${event.place}</li>
                            <li class="list-group-item"><i class="icon-ok text-danger"></i>名額：${fieldValue(bean: event, field: "registerQty")}/${fieldValue(bean: event, field: "capacityQty")}/${fieldValue(bean: event, field: "standbyQty")}</li>
                            <li class="list-group-item"><i class="icon-ok text-danger"></i>活動對象：${event.audience}</li>
                            <li class="list-group-item"><i class="icon-ok text-danger"></i>內容簡介：${event.intro}</li>
                            <g:if test="${event.files?.size() > 0}">
                                <li class="list-group-item"><i class="icon-ok text-danger"></i><g:link url="${createLinkTo(file:''+event.files)}">檔案下載</g:link></li>
                            </g:if>
                            <g:if test="${event.memo}">
                            <li class="list-group-item"><i class="icon-ok text-danger"></i>備註：<br/>${event.memo}</li>
                            </g:if>

                        </ul>
                    </div><!--/panel-->
                </g:each>
                <g:form action="dataAgree">
                    <table>
                        <thead>
                            <tr>
                                <th>多場次報名</th>
                                <th>場次名稱</th>
                                <th>場次時間</th>
                                <th>已報/可報/候補名額</th>
                                <th>詳細資訊</th>
                            </tr>
                        </thead>
                        <tbody>
                            <g:each in="${events}" status="i" var="eventInstance">
                                <tr class="${(i % 2) == 0 ? 'even' : 'odd'}">
                                    <td>
                                    <g:if test="${eventInstance.status == "尚可報名"}">
                                        <g:checkBox name="reg" value="${eventInstance.id}" checked="false"/>
                                    </g:if>
                                    <g:elseif test="${eventInstance.status == "候補報名"}">
                                        <g:checkBox name="reg" value="${eventInstance.id}" checked="false"/> ${eventInstance.status}
                                    </g:elseif>
                                    <g:else>
                                        ${eventInstance.status}
                                    </g:else>
                                    <g:if test="${eventInstance.regFee > 0}">
                                        <br/>付費課程                                        
                                    </g:if>

                                    </td>
                                    <td>${fieldValue(bean: eventInstance, field: "name")}</td>
                                    <td>${formatDate(format:"MM/dd HH:mm",date:eventInstance.dateStart)} ~ ${formatDate(format:" HH:mm",date:eventInstance.dateEnd)}</td>
                                    <td>${fieldValue(bean: eventInstance, field: "registerQty")}/${fieldValue(bean: eventInstance, field: "capacityQty")}/${fieldValue(bean: eventInstance, field: "standbyQty")}</td>
                                    <td><a href="#" name="show" eventId="${eventInstance.id}">顯示</a></td>
                                </tr>
                            </g:each>
                        </tbody>
                    </table>
                    <div class="pagination">
                        <m:paginate total="${serial.events.count}" />
                    </div>
                    請勾選欲報名場次，再點選「我要報名」鍵報名　<g:submitButton name="regEvents" value="我要報名" class="btn btn-primary btn-sm" />
                    <span id="error" style="color:red;display:none">　最少需選一場次！</span>
                </g:form>
            </div><!--/col-->
        </div><!--/row-->
    </body>
</html>

